<template>
    <!-- 根部必须有一个div：包含所有内容 -->
    <div>
        <Navigation :username="username"></Navigation>
        <div class='find-page'>
            <div class='find-window'>

                <div class='find-item' v-for="item in user_list" :key="item.id">

                    <div class='find-info'>
                        <el-avatar :size=45 :src="circleUr"></el-avatar>
                    </div>
                    <div class='find-info'>
                        {{ item.username }}
                    </div>
                    <div class='find-info'>
                        <el-button size="small" type="primary" plain @click="add_friend(item.id)">添加</el-button>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>



<style>
    .find-page {
        width: 100vw;
        height: calc(100vh - 56px);
        margin: 0px;
        display: flex;
        align-items: stretch;
        justify-content: center;
    }

    .find-window {
        width: 900px;
        min-width: 500px;
        background-color: rgba(255, 255, 255, 0.658);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: auto;
        /* flex-wrap: wrap; */
    }

    /* 自定义滚动条简单版： */
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    .find-window::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #f5f5f5;
    }

    /*定义滚动条的轨道，内阴影及圆角*/
    .find-window::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(110, 110, 110, 0.301);
        border-radius: 10px;
        background-color: #f3f3f3;
    }

    /*定义滑块，内阴影及圆角*/
    .find-window::-webkit-scrollbar-thumb {
        /*width: 10px;*/
        height: 20px;
        border-radius: 4px;
        box-shadow: inset 0 0 6px rgb(255, 255, 255);
        background-color: rgb(175, 175, 175);
    }

    .find-item {
        width: 350px;
        height: 70px;
        min-height: 70px;
        margin: 10px;
        background-color: rgba(255, 255, 255, 0.658);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .find-info {
        margin: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>


<script>
    import Navigation from "../../components/Navigation.vue"
    import api from '../../utils/api.js'


    export default {

        // 名字
        name: 'Find',

        // 数据
        data() {
            return {
                user_list: [],
                username: '',
                circleUr: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            }
        },

        // 引入(注册)组件
        components: {
            Navigation
        },

        // 方法
        methods: {
            add_friend: function (id) {
                console.log(id)
                var path = api.api + "/friend/add?id=" + id
                //axios
                this.axios
                    .get(path)
                    .then(response => {
                        console.log(response)
                        this.$message(response.data.state);
                    })
            },

            find: function () {

                if (this.$route.query.keyinfo) {
                    var path = api.api + "/user/find?info=" + this.$route.query.keyinfo
                    this.axios
                        .get(path)
                        .then(response => {
                            console.log(response)
                            this.user_list = response.data
                        })
                } else {
                    var path = api.api + "/user/list"
                    this.axios
                        .get(path)
                        .then(response => {
                            console.log(response)
                            this.user_list = response.data
                        })
                }
            }
        },

        watch: {
            $route() {
                let that = this
                that.find();
            }
        },

        mounted() {
            // 未登录跳转
            var path = api.api + "/user/state"
            this.axios
                .get(path)
                .then(response => {
                    console.log(response)
                    if (response.data.state == "未登录") {
                        this.$router.push({
                            path: '/login'
                        })
                    } else {
                        this.username = response.data.users[0].username
                        let that = this
                        that.find();
                    }
                })
        },

    }
</script>